<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vue检测数据改变的原理_数组</title>
    <script
        type="text/javascript"
        src="../vue.js"
    ></script>
    </head>
    <body>
        <div id="root">

            <h2>学生姓名：{{name}}</h2>
            <h2>学生地址：{{address}}</h2>
            <h2>学生年龄：真实{{student.age.rAge}}岁，虚假{{student.age.sAge}}岁</h2>
            <h2>学生朋友：</h2>
            <ul>
                <li v-for="(f,index) in student.frients" :key="index">
                    {{f.name}}--{{f.address}}--{{f.tel}}
                </li>

            </ul>
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false;
            const vm = new Vue({
                el: '#root',
                data() {
                    return {
                        name: '李华',
                        address: '宝鸡',
                        student: {
                            name: 1,
                            address: 'xxx',
                            age: {
                                rAge: 20,
                                sAge: 30
                            },
                            frients: [
                                {name: '韩梅梅', address: 'address1', tel: '123456'},
                                {name: '丹妮', address: 'address2', tel: '223456'},
                            ]
                        },

                    }
                }
            })

        </script>
    </body>
</html>